<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="leftDrawerOpen = !leftDrawerOpen"
        />

        <img src="~assets/logo.png" style="width: 38px" />

        <q-toolbar-title>
          Qdrant Demo - E-commerce products categorization
        </q-toolbar-title>

      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      bordered
      content-class="bg-grey-1"
    >
      <q-list>
        <q-item-label header class="text-grey-8">
          Essential Links
        </q-item-label>
        <EssentialLink
          v-for="link in essentialLinks"
          :key="link.title"
          v-bind="link"
        />
      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
import EssentialLink from "components/EssentialLink.vue";

const linksData = [
  {
    title: "GitHub - Engine",
    caption: "github.com/qdrant/qdrant",
    icon: "code",
    link: "https://github.com/qdrant/qdrant"
  },
  {
    title: "GitHub - Demo",
    caption: "github.com/qdrant/goods_categorization_demo",
    icon: "code",
    link: "https://github.com/qdrant/goods_categorization_demo"
  },
  {
    title: "Qdrant Docs",
    caption: "qdrant.tech/documentation",
    icon: "school",
    link: "https://qdrant.tech/documentation/"
  },
];

export default {
  name: "MainLayout",
  components: { EssentialLink },
  data() {
    return {
      leftDrawerOpen: false,
      essentialLinks: linksData
    };
  }
};
</script>
